<template>
    <van-list @load="loadData" :loading="loading" :finished="finished" :finished-text="'没有更多了'">
        <PayItem @confirm="() => { page = 1; finished = false; data = []; loadData() }" :load="loadData"
            v-for="item in data" :key="item.id" :item="item" />
    </van-list>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import PayItem from './PayItem.vue'
import { ReviewOrderApi } from '@/apis/payment'

const data = ref([])
const loading = ref(false)
const page = ref(1)
const finished = ref(false)

const props = defineProps({
    orderStatus: {
        type: Number,
        default: 1
    }
})

watch(
    () => props.orderStatus,
    () => {
        page.value = 1
        finished.value = false
        data.value = []
        loadData()
    }
)

async function loadData() {
    loading.value = true
    let params = {}
    if (props.orderStatus === 1) {
        params = {
            orderStatus: 1
        }
    } else if (props.orderStatus === 2) {
        params = {
            orderStatus: 5
        }
    } else if (props.orderStatus === 3) {
        params = {
            settlement: 1
        }
    } else {
        params = {
            orderStatus: [2, 3, 4]
        }
    }
    const { list } = await ReviewOrderApi({ page: page.value, limit: 10, ...params });
    if (list.length < 1) {
        finished.value = true
    } else {
        page.value++
        data.value = [...data.value, ...list]
    }
    loading.value = false
}

onMounted(() => {
    loadData()
})

</script>
